<template>
	<view class="share">
		<navTop url="share" @langUpdata="langUpdata"></navTop>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="df-aic-jucen mt80 mb-30">
				<text class="fsz-50 fw-b">{{$t('邀请好友')}}</text>
				<text class="fsz-50 fw-b color-lv">{{$t('得奖励')}}</text>
			</view>
			<view class="u-text-center fsz-24">{{$t('邀请好友一起建造属于自己的帝国平台')}}</view>
			<view class="people df-aic-jusb">
				<text class="fsz28">{{$t('分享人数')}}</text>
				<text class="fsz-40 fw-b">{{userinfo.referral_count}}</text>
			</view>
			<view class="link">
				<view class="fsz-28 color-8c8 mb-30">{{$t('邀请链接')}}</view>
				<view class="fsz-28 mb-40 url">{{h5url}}</view>
				<view class="btn df-aic-jucen fsz-26 fw-b" @click="$copy(h5url,$t('复制成功'))">{{$t('复制链接')}}</view>
			</view>
			<view class="list">
				<view class="til fsz-32 fw-b df-aic">{{$t('分享列表')}}</view>
				<view class="item" v-for="(item,index) in list" :key="index">
					<view class="df-aic-jusb mb-20">
						<text class="fsz-28 fw-b">{{item.maddress}}</text>
						<!-- <view class="vip df-aic">
							<image src="../../static/img/usdt.png" mode=""></image>
							<view class="name fsz-24 fw-b">V12</view>
						</view> -->
					</view>
					<text class="fsz-24 color-8c8">{{item.created_at}}</text>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				list: [],
				userinfo:{},
				h5url:'',
			}
		},
		onShow() {
			this.getUser()
		},
		methods:{
			langUpdata(){
				this.mescroll.resetUpScroll();
			},
			getUser(){
				this.$http.get('/api/users/my').then(res=>{
					if(res.code == 200){
						this.userinfo = res.data
						this.h5url = window.location.protocol+'//'+window.location.host+'?ref='+this.userinfo.referral_code
					}
				})
			},
			/*下拉刷新的回调*/
			downCallback() {
				this.mescroll.resetUpScroll();
			},
			/*上拉加载的回调*/
			upCallback(page) {
				if(this.mescroll){
					this.mescroll.optDown.textInOffset = this.$t('下拉刷新')
					this.mescroll.optDown.textOutOffset = this.$t('释放更新')
					this.mescroll.optDown.textLoading = this.$t('加载中 ...')
					this.mescroll.optDown.textSuccess = this.$t('加载成功')
					this.mescroll.optDown.textErr = this.$t('加载失败')
					this.mescroll.optUp.textInOffset = this.$t('下拉刷新')
					this.mescroll.optUp.textOutOffset = this.$t('释放更新')
					this.mescroll.optUp.textLoading = this.$t('加载中 ...')
					this.mescroll.optUp.textSuccess = this.$t('加载成功')
					this.mescroll.optUp.textSuccess = this.$t('加载失败')
					this.mescroll.optUp.empty.tip = this.$t('暂无数据')
					this.mescroll.optUp.textNoMore = this.$t('-- 沒有更多了 --')
				}
				this.$http.get('/api/users/my/referrals', {
					page_no: page.num,
					page_size:10
				}).then(res => {
					if (res.code == 200) {
						let arr = res.data.referrals;
						if (page.num === 1) this.list = [];
						this.list = this.list.concat(arr);
						this.$nextTick(() => {
							this.mescroll.endSuccess(arr.length)
						})
					}
				}).catch((e) => {
					this.mescroll.endErr();
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.share{
		min-height: 100vh;
		background: url('../../static/img/bg2.png')no-repeat left top;
		background-size: 750rpx 1090rpx;
		.people{
			width: 690rpx;
			height: 120rpx;
			background: #090A0A;
			border-radius: 20rpx;
			border: 1px solid #62656D;
			margin: 700rpx auto 30rpx;
			padding: 0 40rpx;
		}
		.link{
			width: 690rpx;
			height: 285rpx;
			margin: 40rpx auto;
			background: #1A1B1D;
			border-radius: 20rpx;
			padding: 40rpx 30rpx;
			.btn{
				width: 630rpx;
				height: 80rpx;
				background: #6CE844;
				border-radius: 20rpx;
				color: #000;
			}
			.url{
				word-break:break-all; 
			}
		}
		.list{
			width: 690rpx;
			margin: auto;
			background: #131415;
			border-radius: 20rpx;
			padding: 0 30rpx;
			.til{
				height: 100rpx;
				border-bottom: 1px solid #1A1B1D;
			}
			.item{
				height: 148rpx;
				border-bottom: 1px solid #1A1B1D;
				padding-top: 30rpx;
				.vip{
					min-width: 116rpx;
					height: 44rpx;
					background: #1A1B1D;
					border-radius: 22rpx;
					padding-right: 20rpx;
					image{
						width: 44rpx;
						height: 44rpx;
					}
					.name{
						color: #838792;
						margin-left: 12rpx;
					}
				}
			}
		}
	}
</style>